<template>
  <div>
      <div class="box"  v-for="(v,i) in this.$store.state.crr" :key="i">
        <img :src=v.cover >
        <p class="year"> {{v.gname}} </p>
        <p class="summer">{{v.difficulty.dname}}</p>
        <div class="bot">
          <span class="green"> {{v.category.category_name}} </span>
          <span > {{v.study}} </span>
        </div>
      </div>
  </div>
</template>

<script>
export default {
   mounted(){
    this.$store.dispatch("axioslink",{url:"http://42.192.226.170:8000/api/hot_goods/2/"})
  },
}
</script>

<style scoped>
    .box{
      width: 3.3rem;
      height: 1rem;
      margin: auto;
      position: relative;
      margin-bottom: .25rem;
    }
    img{
      width: 75px;
      height: 1rem;
      background-color:tomato;
    }
    .year{
      position: absolute;
      top: 0;
      left: 1rem;
      font-weight: bold;
    }
    .summer{
      position: absolute;
      top: .34rem;
      right: 1.10rem;
      color: #787878;
    }
    .bot{
      display: flex;
      justify-content: space-around;
      width: 2.53rem;
      position: absolute;
      top:0.7rem;
      right: 0;
    }
    .green{
      color: #46c142;
    }
    .bot span:nth-child(2){
      color:#787878 ;
    }

</style>